<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>订单打印</title>
        <meta name="description" content="畅购">
        <meta name="keywords" content="畅购">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="/plugins/elementui/index.css">
        <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="/css/style.css">
        <style>
            .grid-content {
                border-radius: 4px;
                min-height: 40px;
            }
        </style>

    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1><small>批量打印发货单</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-button @click="exportExcel"><i class="el-icon-close"></i>关闭</el-button>
                    <el-button @click="printpage()">导出PDF</el-button>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box" style="height: 900px">
                    <div class="excelTitle" >

                    </div>
                    <table class="exceTable" cellspacing="0" cellpadding="0" v-for="order in orderlist">
                        <tbody>
                        <tr>
                            <td colspan="4" class="headBody">订单信息</td>
                        </tr>
                        <tr class="tabletrBg textCenter">
                            <td>货号</td>
                            <td>商品名称</td>
                            <td>价格</td>
                            <td>属性</td>
                            <td>数量</td>
                            <td>小计</td>
                        </tr>
                        <tr v-for="orderitem in orderlist.orderItemList">
                            <td>{{orderitem.id}}</td>
                            <td>{{orderitem.name}}</td>
                            <td>{{orderitem.price}}</td>
                            <td>{{orderitem.spuId}}</td>
                            <td>{{orderitem.num}}</td>
                            <td>{{orderitem.payMoney}}</td>
                        </tr>
                        </tbody>
                        <tbody frame=void >
                            <tr align="right">
                                <td>商品总价:&nbsp;</td>
                                <td>运费:&nbsp;</td>
                                <td>订单总金额:&nbsp;</td>
                                <td>支付方式:&nbsp;</td>
                            </tr>
                            <tr>
                                <td>手机号码:{{order.receiverMobile}}</td>
                                <td>提交时间:{{order.receiverAddress}}</td>
                                <td rowspan="2">
                                    <div class="barcode center">
                                        <img id="bcode"/>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>订单编号:{{order.id}}</td>
                                <td>收货地址:{{order.receiverAddress}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="/js/vue.js"></script>
    <script src="/plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <script type="text/javascript" src="../static/js/JsBarcode.all.js"></script>
    <script>
        $("#bcode").JsBarcode("283512348645177031");//or JsBarcode("#barcode", "283512348645177031");
    </script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                reportData:[[${orderlist}]]
            },
            methods:{
                exportExcel(){
                    window.close();
                },
                printpage(){
                    window.print();
                },createBarcode () {
                    JsBarcode('#barcode',data.uniqueCode,{
                        format: "CODE128", // 选择要使用的条形码类型
                        width: 539,
                        height: 90,
                        text: '1284409147235897344',
                        displayValue: true, // 是否在条形码下方显示文字 如果压缩图片数字会变形，可设置false，用css样式调整数字的位置
                        textPosition: "bottom" //设置文本的垂直位置
                    })
                },
            },
            created:function () {
                this.createBarcode();
            }
        })
    </script>
</html>
